<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    ul, ol {
        list-style: none;
    }

</style>
<body>
<div id="click-example">
    <!-- 传入$event 访问原生DOM事件, -->
    <button value="1" @click="greet($event,msg)">alert</button>
    <!-- 阻止单击事件冒泡 -->
    <a @click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form @submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a @click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form @submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div @click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div @click.self="doThat">...</div>
    <!-- 点击事件将只会触发一次 -->
    <a @click.once="doThis"></a>
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input @keyup.13="submit">
    <!-- 缩写语法,效果同上 -->
    <input @keyup.enter="submit">
    <!--
    全部的按键别名：
        .enter
        .tab
        .delete (捕获 “删除” 和 “退格” 键)
        .esc
        .space
        .up
        .down
        .left
        .right
        .ctrl

    -->
    <!--2.1.0新增-->
    <!--
        .alt
        .shift
        .meta
     -->
    <!--
    在Mac系统键盘上，meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。
    在Sun操作系统键盘上，meta对应实心宝石键 (◆)。
    在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，
    比如Knight键盘，space-cadet键盘，meta被标记为“META”。
    在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
    -->
    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
    <!--
    修饰键比正常的按键不同；
    修饰键和 keyup 事件一起用时，
    事件引发时必须按下正常的按键。
    换一种说法：如果要引发 keyup.ctrl，
    必须按下 ctrl 时释放其他的按键；
    单单释放 ctrl 不会引发事件。
    -->
    <!--
        .left
        .right
        .middle
        这些修饰符会限制处理程序监听特定的滑鼠按键。
    -->
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    var vm = new Vue({
        el: '#click-example',
        data: {
            msg: '传参,内联'
        },
        //methods 方法,记得要加s,方法是很多个不是一个
        methods: {
            greet: function (event, msg) {
                console.log(event);
                // `this` 在方法里指当前 Vue 实例
                console.log('Hello ' + msg + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    //阻止默认事件
                    event.preventDefault();
                    //阻止冒泡
                    event.stopPropagation();
                    alert(event.target.value)
                }
            }
        }
    })
    //    可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
    //    可以使用 @keyup.key
    //    Vue.config.keyCodes.key = 112

</script>